<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-form>
				<el-form-item label="产品搜索：">
					<el-input style="width: 170px" v-model="form.fundFullName" size="small" clearable></el-input>
				</el-form-item>
				<el-form-item label="产品类型：" style="margin-left: 20px">
					<el-select style="width: 170px" clearable filterable v-model="form.fundType" placeholder="请选择" size="small">
						<el-option key="" label="--请选择--" value=""> </el-option>
						<el-option v-for="item in fundTypeList" :key="item.typeCode" :label="item.typeName" :value="item.typeCode"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="复核状态：" style="margin-left: 20px">
					<el-select style="width: 170px" clearable filterable v-model="form.isCheckCompliance" placeholder="请选择" size="small">
						<el-option key="1" label="未复核" value="1"> </el-option>
						<el-option key="0" label="已复核" value="0"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="产品运作状态：" style="margin-left: 20px">
					<el-select style="width: 170px" clearable filterable v-model="form.status" placeholder="请选择" size="small">
						<el-option key="" label="--请选择--" value=""> </el-option>
						<el-option
							v-for="(item, index) in fundOpStatusList"
							:key="item.typeCode + index"
							:label="item.typeName"
							:value="item.typeCode"
						>
						</el-option>
					</el-select>
					<el-button
						type="primary"
						style="margin-left: 30px"
						icon="el-icon-search"
						size="mini"
						@click="getDataList"
						:disabled="searchLoading"
						:loading="searchLoading"
						>查 询</el-button
					>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="fundCode" label="基金代码" width="180"> </el-table-column>
				<el-table-column prop="fundFullName" label="基金名称"> </el-table-column>
				<el-table-column prop="fundTypeName" label="产品类型" width="180"></el-table-column>
				<el-table-column prop="statusName" label="运作状态" width="180"> </el-table-column>
				<el-table-column prop="fundFullName" label="合规是否复核" width="180">
					<template slot-scope="{ row }">
						<span :style="'color:' + row.color">{{ row.riskInfoCheck }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="primary" @click="btnClick('查看', scope.row)" icon="el-icon-view" size="mini">查 看</el-button>
						<el-button
							v-if="scope.row.isCheckCompliance !== '0'"
							type="primary"
							@click="btnClick('复核', scope.row)"
							icon="el-icon-coordinate"
							size="mini"
							>复 核</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>

		<windCheckCom ref="windCheckCom" :title="title" :addComShow="addComShow" @comIsShow="comIsShow" @getDataList="getDataList" />
	</el-container>
</template>
<script>
import { fundListData, fundAll, getAllCheck } from '@/api/productApi/infoMain'
import { getEnum } from '@/api/productApi/file'
import windCheckCom from './components/index.vue'
export default {
	name: 'WindControl',

	components: { windCheckCom },

	data() {
		return {
			tableData: [],
			// 分页配置
			paging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 50, 100, 200]
			},
			searchLoading: false,
			addComShow: false,
			title: '',
			form: {
				fundRaiseType: '2',
				moduleStatus: ['3', '4', '5'],
				isCheckCompliance: '1'
			},
			fundTypeList: [],
			managerList: [],
			checckPersonList: [],
			fundOpStatusList: []
		}
	},

	mounted() {
		this.getDataList()
		this.getProductDictList()
		this.getUserOpList()
	},

	methods: {
		// 查询：产品经理权限的责任人列表
		async getUserOpList() {
			await fundAll({ fundRaiseTypes: ['2'] }).then(res => {
				if (res.msgCode === 'Y') {
					this.managerList = res.data.body.filter(item => !!item.personLiableId)
				}
			})
			await getAllCheck({ fundRaiseType: '2' }).then(res => {
				if (res.msgCode === 'Y') {
					this.checckPersonList = res.data.body.filter(item => !!item.checkLiableId)
				}
			})
		},

		// 查询运作状态列表
		async getProductDictList() {
			await getEnum(['fundOperationStatus', 'fundType']).then(res => {
				if (res.msgCode === 'Y') {
					this.fundOpStatusList = res.data.body.fundOperationStatus
					this.fundTypeList = res.data.body.fundType.filter((item, index) => index > 5)
				}
			})
		},

		comIsShow() {
			this.addComShow = !this.addComShow
			if (!this.addComShow) {
				this.title = ''
			}
		},

		btnClick(title, obj) {
			this.title = title
			this.comIsShow()
			this.$refs.windCheckCom.edit(obj)
		},

		// 改变页数
		handleCurrentChange(val) {
			this.paging.num = val
			this.getDataList()
		},

		// 改变条数
		handleSizeChange(val) {
            this.paging.num = 1
			this.paging.size = val
			this.getDataList()
		},

		getDataList() {
			this.searchLoading = true
			fundListData(this.form, this.paging)
				.then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							item.fundTypeName = this.fundTypeList.find(items => items.typeCode === item.fundType)
								? this.fundTypeList.find(items => items.typeCode === item.fundType).typeName
								: ''
							item.statusName = this.fundOpStatusList.find(items => items.typeCode === item.status)
								? this.fundOpStatusList.find(items => items.typeCode === item.status).typeName
								: ''
							item.riskInfoCheck = item.isCheckCompliance === '0' ? '已复核' : '未复核'
							item.color = item.isCheckCompliance === '0' ? 'rgb(103, 194, 58)' : 'red'
						})
						this.paging.total = res.data.page.total
						this.tableData = res.data.body
					}
				})
				.finally(() => {
					this.$nextTick(() => {
						this.searchLoading = false
					})
				})
		}
	}
}
</script>
<style lang="scss" scoped src="./index.scss">
</style>
